<template>
<div class="big">
  <p>**月考勤统计</p>
  <div style="position: relative;left: 85%;top: 15px">
    <span>{{nowWeek}}</span>
    <span>{{nowDate}}</span>
    <span>{{nowTime}}</span>
  </div>
</div>
</template>

<script>
export default {
  name: "Theme",
  data() {
    return {
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
    };
  },
  mounted() {
    var _this = this;
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  methods: {
    setNowTimes() {
      let myDate = new Date();
      // console.log(myDate)
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "年" + mm + "月" + dd + "日"
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
  }
}
</script>

<style scoped>
.big{
  width: 100%;
  height: 60px;
  background: url("../../assets/img/ThemeTop.png") center no-repeat;
  position: relative;
  top: 0px;
}
p{
  margin: 0;
  font-size: 30px;
  color: cyan;
  position: absolute;
  top: 20%;
  left: 45%;
}
span{
  color: cyan;
}
</style>
